/**
 * @Title: detail-modal.js
 * @Description: detail-modal
 * @author: Fanchao
 * @date: 2021/2/4 6:27 下午
 * @version V1.0
 */
import React, { memo, useMemo } from 'react';
import { Col, Modal, Row } from 'antd';
import styles from '@/pages/home/index.less';
import st from './detail-modal.less';

const DetailModal = memo(({ detailData, show, cb }) => {
    const headerData = Object.values(detailData.categoryMap ? detailData.categoryMap : {});
    const tableData = detailData.studentEvaluateScoreDetailList ? detailData.studentEvaluateScoreDetailList : [];
    const width = useMemo(() => {
        return 100 / (headerData.length + 3);
    }, [headerData.length]);
    return (
        <Modal
            title="学员评分详情"
            visible={show}
            width="1000px"
            onOk={() => {
                cb && cb();
            }}
            onCancel={() => {
                cb && cb();
            }}
        >
            <div>
                <Row>
                    <Col span={6}>
                        <span className={styles.label}>样本总数：</span>
                        <span className={styles.value}>{detailData.totalSample}</span>
                    </Col>
                    <Col span={6}>
                        <span className={styles.label}>无效样本数：</span>
                        <span className={styles.value}>{detailData.inValidSample}</span>
                    </Col>
                    <Col span={6}>
                        <span className={styles.label}>初始平均分：</span>
                        <span className={styles.value}>{detailData.firstAverageScore}</span>
                    </Col>
                    <Col span={6}>
                        <span className={styles.label}>最终平均分：</span>
                        <span className={styles.value}>{detailData.finalAverageScore}</span>
                    </Col>
                    <Col span={6}>
                        <span className={styles.label}>极大值离差：</span>
                        <span className={styles.value}>{detailData.maxDispersion}</span>
                    </Col>
                    <Col span={6}>
                        <span className={styles.label}>极小值离差：</span>
                        <span className={styles.value}>{detailData.minDispersion}</span>
                    </Col>
                    <Col span={6}>
                        <span className={styles.label}>舍弃最高分：</span>
                        <span className={styles.value}>{detailData.abandonMaxScore}</span>
                    </Col>
                    <Col span={6}>
                        <span className={styles.label}>舍弃最低分：</span>
                        <span className={styles.value}>{detailData.abandonMinScore}</span>
                    </Col>

                    <Col span={6}>
                        <span className={styles.label}>标准差：</span>
                        <span className={styles.value}>{detailData.standardDeviation}</span>
                    </Col>
                    <Col span={6}>
                        <span className={styles.label}>3倍标准差：</span>
                        <span className={styles.value}>{detailData.trebleStandardDeviation}</span>
                    </Col>
                </Row>
                <div className={st.tableContainer}>
                    <div className={st.headerData}>
                        <span style={{ width: `${width}%` }}>序号</span>
                        {
                            headerData.map((item, index) => <span style={{ width: `${width}%` }}
                                                                  key={index}>{item}</span>)
                        }
                        <span style={{ width: `${width}%` }}>总分</span>
                        <span style={{ width: `${width}%` }}>备注</span>
                    </div>
                    <div className={st.tableData}>
                        {
                            tableData.map((item, index) => {
                                return (
                                    <div className={st.tableItem} key={index}>
                                        <span style={{ width: `${width}%` }}>{index + 1}</span>
                                        {
                                            item.evaluateCheckPointModelList.map((cItem, cIndex) => {
                                                return <span style={{ width: `${width}%` }}
                                                             key={cIndex}>{cItem.checkPointScore}</span>;
                                            })
                                        }
                                        <span style={{
                                            width: `${width}%`,
                                            color: item.valid ? '' : 'red',
                                        }}>{item.totalScore}</span>
                                        <span style={{ width: `${width}%` }}>{item.remark}</span>
                                    </div>
                                );
                            })
                        }
                    </div>
                </div>
            </div>
        </Modal>
    );
});

export default DetailModal;
